<template>
  <div class="new_album">
    <div class="content_wrap">
      <div class="content">
        <div
          v-for="(item, index) in albumsList.slice(0,10)"
          :key="index"
          style="position: relative"
          class="image"
        >
          <div @click="ToDetail(item.id)" class="image_wrap">
            <el-image lazy :src="item.picUrl ? item.picUrl : item.coverImgUrl">
            </el-image>

            <div class="play_img">
              <img
                src="@/assets/image/play.svg"
                alt=""
                style="
                  width: 50px;
                  height: 50px;
                  background: #aca8a1;
                  border-radius: 100%;
                  opacity: 0.8;
                "
              />
            </div>
          </div>

          <span class="name">{{ item.name }}</span>
          <span>{{item.artist.name}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewAlbums } from "@/util/music.js";
export default {
  name: "Newalbum",

  data() {
    return {
      albumsList: [],
    };
  },

  mounted() {
    this.getNewAlbums();
  },

  methods: {
    //获取最新专辑
    async getNewAlbums() {
      let { data } = await getNewAlbums();
      this.albumsList = data.albums;
      // console.log(data);
    },
        //跳转至专辑详情
    ToDetail(id) {
      this.$router.push("/abumetail/" + id);
    },
  },
};
</script>

<style lang="less" scoped>
.content_wrap {
  position: relative;
  margin-top: 30px;
  .el-zoom-in-top-enter-active {
    transition: all 0.5s;
  }
  .el-zoom-in-top-leave-active {
    transition: all 0.5s;
  }
  .show_name {
    // padding: 20px 30px;
    position: absolute;
    width: 100%;
    height: 480px;
    background-color: #f5f5f7;
    z-index: 99;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    .show_name_wrap {
      padding: 20px 30px;
      display: flex;
      .category_title {
        width: 60px;
        font-size: 22px;
        font-weight: 600;
        color: #4f4f4f;
      }
      .name_wrap {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        .name_list {
          font-size: 17px;
          color: #333333;
          text-align: left;
          padding: 5px 15px;
          border-radius: 10px;
          margin-bottom: 10px;
          &:hover {
            background-color: #eaeffd;
            color: #335eea;
          }
        }
        .active {
          color: #335eea;
          background-color: #eaeffd;
        }
      }
    }
  }
  .content {
    // display: flex;
    // flex-wrap: wrap;
    display: grid;
    justify-content: space-around;
    grid-template-columns: repeat(auto-fill, 17rem);
    .image {
      margin-bottom: 45px;
      .image_wrap {
        position: relative;
        .el-image {
          border-radius: 10px;
        }
        .play_img {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -25px;
          margin-top: -25px;
          display: none;
          transition: all 1s 1s;
        }
      }
    }
    .image:hover .play_img {
      display: block;
    }
    .name {
      display: block;
      font-size: 16px;
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .more {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    div {
      cursor: pointer;
      background-color: #f7f7f9;
      padding: 10px 20px;
      color: #393939;
      border-radius: 10px;
      transition: 0.5s;
      &:active {
        transform: scale(1.1);
      }
    }
  }
}
</style>